<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <!--edge浏览器H5兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--360浏览器H5兼容设置-->
    <meta name="renderer" content="webkit" />
    <title>电脑商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <link
      href="../bootstrap3/css/bootstrap.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <link
      rel="stylesheet"
      href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"
    />
    <link rel="stylesheet" type="text/css" href="../css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../css/top.css" />
    <link rel="stylesheet" type="text/css" href="../css/footer.css" />
  </head>

  <body>
    <!--头部-->
    <header class="header">
      <!--电脑商城logo-->
      <div class="row">
        <div class="col-md-3">
          <a href="index.html">
            <img src="../images/index/stumalllogo.png" />
          </a>
        </div>
        <!--快捷选项-->
        <div class="col-md-9 top-item">
          <ul class="list-inline pull-right">
            <li>
              <a href="favorites.html"
                ><span class="fa fa-heart"></span>&nbsp;收藏</a
              >
            </li>
            <li class="li-split">|</li>
            <li>
              <a href="orders.html"
                ><span class="fa fa-file-text"></span>&nbsp;订单</a
              >
            </li>
            <li class="li-split">|</li>
            <li>
              <a href="cart.html"
                ><span class="fa fa-cart-plus"></span>&nbsp;购物车</a
              >
            </li>
            <li class="li-split">|</li>
            <li>
              <!--下列列表按钮 ：管理-->
              <div class="btn-group">
                <button
                  type="button"
                  class="btn btn-link dropdown-toggle"
                  data-toggle="dropdown"
                >
                  <span id="top-dropdown-btn"
                    ><span class="fa fa-gears"></span>&nbsp;管理
                    <span class="caret"></span
                  ></span>
                </button>
                <ul class="dropdown-menu top-dropdown-ul" role="menu">
                  <li><a href="password.html">修改密码</a></li>
                  <li><a href="userdata.html">个人资料</a></li>
                  <li><a href="upload.html">上传头像</a></li>
                  <li><a href="address.html">收货管理 </a></li>
                  <li><a href="/users/exit">退出账号</a></li>
                </ul>
              </div>
            </li>
            <li class="li-split">|</li>
            <li><span class="fa fa-user"></span></li>
          </ul>
        </div>
      </div>
    </header>
    <!--导航 -->
    <!--分割导航和顶部-->
    <div class="row top-nav">
      <div class="col-md-6">
        <ul class="nav nav-pills">
          <li>
            <a href="#"></a>
          </li>
          <li class="active">
            <a href="index.html"><span class="fa fa-home"></span></a>
          </li>
        </ul>
      </div>
    </div>
    <!--头部结束-->
    <!--导航结束-->
    <div class="container">
      <div class="col-md-2">
        <!--左侧导航开始-->
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <!--主选项：我的订单-->
              <p class="panel-title">
                <a
                  data-toggle="collapse"
                  data-parent="#accordion"
                  href="#collapseOne"
                  >我的订单</a
                >
              </p>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
              <div class="panel-body">
                <div><a href="orders.html">全部订单</a></div>
                <div><a href="orders.html">待付款</a></div>
                <div><a href="orders.html">待收货</a></div>
                <div><a href="orders.html">待评价</a></div>
                <div><a href="orders.html">退货退款</a></div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <!--主选项：资料修改-->
              <p class="panel-title">
                <a
                  data-toggle="collapse"
                  data-parent="#accordion"
                  href="#collapseTwo"
                  >资料修改</a
                >
              </p>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
              <div class="panel-body">
                <div><a href="password.html">修改密码</a></div>
                <div>
                  <a href="userdata.html"><b>个人资料</b></a>
                </div>
                <div><a href="upload.html">上传头像</a></div>
                <div><a href="address.html">收货管理</a></div>
              </div>
            </div>
          </div>
        </div>
        <!--左侧导航结束-->
      </div>
      <div class="col-md-10">
        <div class="panel panel-default">
          <ul class="nav nav-tabs">
            <li><a href="password.html">修改密码</a></li>
            <li class="active"><a href="#">个人资料</a></li>
            <li><a href="upload.html">上传头像</a></li>
            <li><a href="address.html">收货管理</a></li>
          </ul>
          <div class="panel-body">
            <!--修改资料表单开始-->
            <form id="form-change-info" class="form-horizontal" role="form">
              <div class="form-group">
                <label class="col-md-2 control-label">用户名：</label>
                <div class="col-md-8">
                  <input
                    id="username"
                    name="username"
                    type="text"
                    class="form-control"
                    value="admin"
                    readonly="readonly"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-2 control-label">电话号码：</label>
                <div class="col-md-8">
                  <input
                    id="phone"
                    name="phone"
                    type="text"
                    class="form-control"
                    placeholder="请输入电话号码"
                    value="13311311313"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-2 control-label">电子邮箱：</label>
                <div class="col-md-8">
                  <input
                    id="email"
                    name="email"
                    type="text"
                    class="form-control"
                    placeholder="请输入电子邮箱"
                    value="sunwk@qq.com"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-2 control-label">性别：</label>
                <div class="col-md-8">
                  <label class="radio-inline">
                    <input
                      id="gender-male"
                      type="radio"
                      name="gender"
                      value="1"
                    />男
                  </label>
                  <label class="radio-inline">
                    <input
                      id="gender-female"
                      type="radio"
                      name="gender"
                      value="0"
                    />女
                  </label>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <input
                    id="btn-change-info"
                    type="button"
                    class="btn btn-primary"
                    value="修改"
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--页脚开始-->
    <div class="clearfix"></div>
    <footer class="footer">
      <!-- 品质保障，私人定制等-->
      <div class="text-center rights container">
        <div class="col-md-offset-2 col-md-2">
          <span class="fa fa-thumbs-o-up"></span>
          <p>品质保障</p>
        </div>
        <div class="col-md-2">
          <span class="fa fa-address-card-o"></span>
          <p>私人订制</p>
        </div>
        <div class="col-md-2">
          <span class="fa fa-graduation-cap"></span>
          <p>学生特供</p>
        </div>
        <div class="col-md-2">
          <span class="fa fa-bitcoin"></span>
          <p>专属特权</p>
        </div>
      </div>
      <!--联系我们、下载客户端等-->
      <div class="container beforeBottom">
        <div class="col-md-offset-1 col-md-3">
          <div>
            <img
              src="../images/index/stumalllogo.png"
              alt=""
              class="footLogo"
            />
          </div>
          <div><img src="../images/index/footerFont.png" alt="" /></div>
        </div>
        <div class="col-md-4 callus text-center">
          <div class="col-md-4">
            <ul>
              <li>
                <a href="#">
                  <p>买家帮助</p>
                </a>
              </li>
              <li><a href="#">新手指南</a></li>
              <li><a href="#">服务保障</a></li>
              <li><a href="#">常见问题</a></li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul>
              <li>
                <a href="#">
                  <p>商家帮助</p>
                </a>
              </li>
              <li><a href="#">商家入驻</a></li>
              <li><a href="#">商家后台</a></li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul>
              <li>
                <a href="#">
                  <p>关于我们</p>
                </a>
              </li>
              <li><a href="#">关于圆心</a></li>
              <li><a href="#">联系我们</a></li>
              <li>
                <span class="fa fa-wechat"></span>
                <span class="fa fa-weibo"></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-4">
          <div class="col-md-5">
            <p>电脑商城客户端</p>
            <img src="../images/index/ios.png" class="lf" />
            <img src="../images/index/android.png" alt="" class="lf" />
          </div>
          <div class="col-md-6">
            <img src="../images/index/erweima.png" />
          </div>
        </div>
      </div>
      <!-- 页面底部-备案号 #footer -->
      <div class="col-md-12 text-center bottom">
        Copyright © 2022 dnsc.cn All Rights Reserved 京ICP备08963888号-45
        <a target="_blank" href="http://www.dnsc.cn/">圆心科技集团有限公司</a>
        版权所有
      </div>
    </footer>
    <!--页脚结束-->
    <script type="text/javascript">
      /**
       * 一旦检测到当前的页面被加载就会触发ready方法
       */
      $(document).ready(
        //在ready方法中写入的代码会在页面加载完成后执行（发起查询用户数据的ajax请求）
        $.ajax({
          url: "/users/get_by_uid",
          type: "GET",
          dataType: "json",
          success: function (json) {
            if (json.state === 200) {
              const { data } = json;
              // console.log(data);

              $("#username").val(data.username);
              $("#phone").val(data.phone);
              $("#email").val(data.email);
              let radio =
                data.gender === 0 ? $("#gender-female") : $("#gender-male");

              //prop()表示给某个元素添加属性及属性的值
              radio.prop("checked", "checked");
            } else {
              alert("数据不存在");
            }
          },
          error: function (xhr) {
            alert("查询信息时产生未知异常" + xhr.message);
          },
        })
      );

      /**
       * 修改用户信息
       */
      $("#btn-change-info").click(function () {
        $.ajax({
          url: "/users/change_info",
          type: "POST",
          timeout: "5000",
          data: $("#form-change-info").serialize(), //Todo 没有收集到username
          dataType: "json",
          success: function (json) {
            if (json.state === 200) {
              alert("用户信息修改成功");
              //修改成功后重新加载当前的页面
              // location.href = "userdata.html"
            } else {
              alert("用户信息修改失败");
            }
          },
          error: function (xhr) {
            //xhr.message可以获取未知异常的信息
            alert("用户信息修改时产生未知的异常！" + xhr.message);
          },
        });
      });
    </script>
  </body>
</html>
